<template>
  <div style="width: 100% ;height:100%;margin: 0 auto;background-color: #F7F7F7;padding-bottom: 650px">
    <div style="width:1080px;height: 100%;margin: 0 auto;">
      <div style="width: 1080px;height:228px;background-color: rgba(240,240,240,0.45)">
        <p style="height: 40px;padding-top: 20px;padding-left: 30px">
          订单信息
          </p>
        <div style="width: 1000px;height: 140px;background-color: white;padding: 40px">
          <!--          左侧景点图片-->
          <div style="width: 30%;border-right: 1px dashed gray;display: inline-block">
            <img :src="atrra.image" alt="" width="301px" height="132px">
          </div>
          <!--          右侧-->
          <div style="display:flex;justify-content:space-around;float: right;width: 690px;">
            <div style="display: inline-block;float: left;width: 320px;height: 93px; ">
              <h1 style="color: #00BF6A"><span>{{atrra.name}}</span>门票</h1>
              <p style="margin-top:15px">有效期至：2025/04/20</p>
              <p style="margin-top:15px">
                选择数量：
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

              </p>
            </div>
            <!--            船标-->
            <div style="display: inline-block;float: right;width: 185px;height: 93px;">
              <h1 style="color: red;">￥<span>{{atrra.price}}</span> <span>/人</span></h1>
              <p style="margin-top: 15px">营业时间：8：00-22：00</p>
              <p style="margin-top: 15px">地址：<span>{{atrra.detailedAddress}}</span></p>
            </div>
          </div>
        </div>

        <div class="tongzhi" style="width: 1000px;background-color: white;padding: 40px;margin-top: 30px">
          <h3>购票须知</h3>
          <p>建议游玩时间4-5小时</p>
          <p>购票证件：二代身份证</p>
          <p>支持票种：成人票，儿童票（6周岁（含）-14周岁（不含）），携童票（0周岁（含）-6周岁（不含））</p>
          <p>【免票群体】
            1、1.4米（含）以下儿童
            2、70周岁以上老人
            3、残疾人
            4、伤残军人，伤残警察
            5、记者
            6、现役军人
            注：均需携带证件至窗口换取免费票后入园</p>
          <p>检票方式：二代身份证</p>
          <p>①门票当天有效，出园后再次入园，需再次购票。
            ②为保证入园顺利，预订时请务必填写真实姓名、手机号码等信息。</p>
          <h3>退改说明</h3>
          <p>线上退票：支持退票</p>
        </div>

        <div style="width:180px;margin-left: 430px;margin-top: 22px">
          <el-button style="width: 180px;height: 50px;background-color:#FF6257;color: white;font-size: 17px" @click="toSubmitOrder">
            提交订单
          </el-button>
<!--          <el-button :plain="true">Success</el-button>-->
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useRoute} from "vue-router";
import {selectAttractionsById} from "@/api/yy/AttractionsHome.js";
import {insertScenicOrder} from "@/api/plane";
import { useCounterStore}  from "@/stores/counter.js";//引入pinia
const store = useCounterStore();//调用pinia
//引入路由
import  router  from "vue-router";
import * as path from "node:path";
import {ElMessage} from "element-plus";
const num = ref(1)
const handleChange = (value: number | undefined) => {
  console.log(value)
}

//根据景点id查询景点信息
const atrra= ref({
  id:'',
  name:'',
  introduce:'',
  detailedAddress:'',
  price:'',
  image:''
})
//根据景点id查询景点信息
const getAttractions = async ()=>{
  const route = useRoute();
  const id = route.query.id;
  const res = await selectAttractionsById(id);
  atrra.value = res.data.data;
  console.log(res)
  console.log("11111111")
  console.log(atrra.value)
}
onMounted(()=>{
  getAttractions()
})
//接收用户id
const id = ref('');
id.value=store.userForm.id
console.log(id.value)
//总金额
const total = ref(0);
//计算总金额
const calculateTotal = ()=>{
  total.value = atrra.value.price * num.value;
}
//生成随机数
const random = ()=>{
  return Math.floor(Math.random()*10000);
}
//提交订单
const toSubmitOrder = ()=>{
  calculateTotal();
  const uid = 0;
  const orderNumber = random();
  const orderName = atrra.value.name;
  const price = total.value;
  insertScenicOrder(uid,orderNumber,orderName,price).then((res)=>{
    open1()
    console.log(res)
    console.log(uid)
  })
  // router.push('/home')
}

const open1 = () => {
  ElMessage({
    message: '添加成功',
    type: 'success',
    plain: true,
  })
}
</script>


<style scoped>
.tongzhi p{
  margin-left: 20px;
  margin-top: 5px;
}
</style>